<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API测试页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        border: 1px solid #ccc;
      }
      .error {
        background-color: #ffebee;
      }
      .success {
        background-color: #e8f5e8;
      }
    </style>
  </head>
  <body>
    <h1>API定义数据测试</h1>
    <button onclick="testAPI()">测试API调用</button>
    <div id="result"></div>

    <script>
      async function testAPI() {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '正在加载...';

        try {
          const response = await fetch('/proxy-default/api/compute/api-definitions');
          const data = await response.json();

          console.log('原始响应:', data);

          if (data.code === '0000' && data.data) {
            const mappedData = data.data.map(item => ({
              id: String(item.id),
              name: item.name,
              bizCode: item.bizCode,
              status: item.enabled ? 'enabled' : 'disabled',
              description: item.description,
              createTime: item.createTime,
              updateTime: item.updateTime
            }));

            resultDiv.innerHTML = `
                        <div class="result success">
                            <h3>API调用成功！</h3>
                            <p>共获取到 ${mappedData.length} 条API定义</p>
                            <pre>${JSON.stringify(mappedData, null, 2)}</pre>
                        </div>
                    `;
          } else {
            resultDiv.innerHTML = `
                        <div class="result error">
                            <h3>API调用失败</h3>
                            <p>错误信息: ${data.msg || '未知错误'}</p>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </div>
                    `;
          }
        } catch (error) {
          console.error('API调用错误:', error);
          resultDiv.innerHTML = `
                    <div class="result error">
                        <h3>网络错误</h3>
                        <p>${error.message}</p>
                    </div>
                `;
        }
      }
    </script>
  </body>
</html>
